<template>
	<view class="circle-chat-detail-warp">
		<view class="container">
			<view class="content-warp bg-white">
				<view class="header flex-x-between">
					<navigator class="w100 flex-x-between" :url="`/pages/life-circle/personal-dynamics/index?uid=${data.uid}`"
					 hover-class="none">
						<view class="left flex-x-start">
							<image :src="data.portrait" class="avatar" />
							<view class="info">
								<text class="block bold">{{data.name}}</text>
								<text class="block gray">{{data.time}}</text>
							</view>
						</view>
						<view class="right">
							<text @click.stop="handleSetCollection(data)" :class="{'iconfontPT': true, 'iconshoucang-weixuanzhong': !data.sc_state, 'iconshoucang-yixuanzhong': data.sc_state}"></text>
						</view>
					</navigator>
				</view>
				<view class="body">
					<view class="w100">
						{{data.content}}
					</view>
					<image class="w100 img" v-for="(photo, index) in data.img" :key="index" :src="host + photo" @click="handlePreviewImage(index)"
					 mode="widthFix" />
				</view>
			</view>
			<view class="comment-wrap bg-white">
				<view class="header flex-x-between">
					<text @click="handleSwitch(1)" :class="{'gray commont': true, 'checked': checkedComment}">评论{{ commentList.length }}</text>
					<text @click="handleSwitch(0)" :class="{'gray like': true, 'checked': !checkedComment}">赞{{ data.fabulous }}</text>
				</view>
				<view v-if="checkedComment" class="comment-body">
					<view class="item" :key="index" v-for="(item, index) in commentList">
						<image :src="item.portrait" class="avatar" />
						<view class="info">
							<view class="commentor flex-x-between w100">
								<text class="block name">{{item.name}}</text>
								<view class="like text-center">
									<text :class="{'iconfontPT like-icon block': true, 'icondianzan-xuanzhong theme': item.dz_state, 'icondianzan-weixuanzhong': !item.dz_state }"
									 @click="handleCommentLike(index)"></text>
									<text :class="{'gray': true, 'theme': item.dz_state}">{{item.fabulous}}</text>
								</view>
							</view>
							<view class="comment-content w100">
								<text class="block content">{{item.content}}</text>
								<view class="flex-x-start">
									<text class="gray comment-date">{{item.time}}</text>
									<text class="comment-replay-number" @click="handleReplay(item.id, item.uid)">{{item.hf.length ? item.hf.length : ''}}&nbsp;回复</text>
								</view>
							</view>
							<view class="comment-replay w100" v-if="item.hf.length">
								<view @click="handleReplyDetail(item.id, data.id, item.uid, item.name, item.content)" hover-class="none">
									<view class="repaly-content">
										<text>{{item.hf[0].name}}：</text>
										<rich-text class="inline-block" :nodes="item.hf[0].content"></rich-text>
									</view>
									<text v-if="item.hf.length>1" class="theme">
										查看全部&nbsp;{{item.hf.length}}&nbsp;条回复
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="thumbsUps-body">
					<view class="item" :key="index" v-for="(item, index) in thumbsUps">
						<image :src="item.portrait" class="avatar"></image>
						<view class="info">
							<text class="block name">{{item.name}}</text>
							<text class="block gray autograph">{{item.autograph ? item.autograph : '暂无'}}</text>
						</view>
					</view>
				</view>
				<no-data v-if="noData" />
			</view>
			<view class="occupying"></view>
			<commentForm ref="myCommentForm" :cid="data.id" :isLike="data.dz_state" :commentNumber="data.comment" @onSetLike="handleArticleLike"
			 @updateComment="handleUpdateComment"></commentForm>
		</view>
	</view>
</template>

<script>
	import commentForm from '../comment-form/index.vue';
	import {
		addLike,
		deleteLike,
		getCircleChat,
		getAllComment,
		getAllLikeNumber
	} from '../../../apis/life-circle/index.js';
	import {
		addCollection,
		cancleCollection
	} from '../../../apis/public/index.js'

	export default {
		data() {
			return {
				id: 0,
				commentPage: 1,
				checkedComment: true,
				data: {},
				noData: false,
				commentList: [],
				thumbsUps: [],
			}
		},
		components: {
			commentForm
		},
		computed: {
			host() {
				return this.$baseHost.car
			},
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getDate()
		},
		methods: {
			handlePreviewImage(index){
				uni.previewImage({
					current:index,
					urls:this.data.img.map(item=> this.host + item)
				})
			},
			handleReplyDetail(pid, cid, uid, name, content) {
				const callObject = {
					name,
					content
				}
				uni.setStorageSync('callObject', callObject)

				uni.navigateTo({
					url: `/pages/life-circle/comment/index?pid=${pid}&cid=${cid}&m_uid=${uid}`
				})
			},
			handleSetCollection(data) {
				this.$loading.show()

				if (this.data.sc_state) {
					cancleCollection({
						id: data.sc_id
					}).then(res => {
						this.$loading.hide()
					})
				} else {
					const params = {
						collection_id: data.id,
						type: 4
					}

					addCollection(params).then(res => {
						this.data.sc_id = res.data
						this.$loading.hide()
					})
				}
				this.data.sc_state = !this.data.sc_state

			},
			handleReplay(pid, puid) {
				this.$refs['myCommentForm'].handleShowPractical(1, pid, puid)
			},
			handleUpdateComment() {
				this.getCommentList(this.data.id)
			},
			getDate() {
				this.$loading.show()
				getCircleChat({
					cid: this.id
				}).then(res => {
					if (+res.code === 200) {
						this.$loading.hide()
						this.data = res.data
						this.getCommentList(res.data.id)
					}
				})
			},
			getCommentList(cid) {
				const params = {
					cid,
					page: this.commentPage
				}
				this.$loading.show()
				getAllComment(params).then(res => {
					if (+res.code === 200) {
						this.checkedComment = true;
						this.commentList = res.data;
						this.noData = !res.data.length ? true : false;
						this.$loading.hide();
					}
				})
			},
			getLikeList() {
				let params = {
					pid: '',
					cid: this.data.id
				};
				this.$loading.show()
				getAllLikeNumber(params).then(res => {
					if (+res.code === 200) {
						this.checkedComment = false;
						this.thumbsUps = res.data;
						this.noData = !res.data.length ? true : false;
						this.$loading.hide();
					}
				})
			},
			handleArticleLike() {
				let isLike = this.data.dz_state,
					likeNumber = this.data.fabulous,
					params = {
						hfid: '',
						pid: '',
						cid: this.data.id,
					};

				if (isLike) {
					this.$loading.show()
					deleteLike(params).then(res => {
						if (+res.code === 200) {
							this.$loading.hide()
							this.data.dz_state = 0
							this.data.fabulous = likeNumber - 1
						}
					})
				} else {
					this.$loading.show()
					addLike(params).then(res => {
						if (+res.code === 200) {
							this.$loading.hide()
							this.data.dz_state = 1
							this.data.fabulous = likeNumber + 1
						}
					})
				}
			},
			handleCommentLike(i) {
				let isLike = this.commentList[i].dz_state,
					likeNumber = this.commentList[i].fabulous,
					params = {
						hfid: '',
						pid: this.commentList[i].id,
						cid: this.data.id,
					};

				if (isLike) {
					this.$loading.show()
					deleteLike(params).then(res => {
						if (+res.code === 200) {
							this.commentList[i].dz_state = 0
							this.commentList[i].fabulous = likeNumber - 1
							this.$loading.hide()
						}
					})
				} else {
					this.$loading.show()
					addLike(params).then(res => {
						if (+res.code === 200) {
							this.commentList[i].dz_state = 1
							this.commentList[i].fabulous = likeNumber + 1
							this.$loading.hide()
						}
					})
				}
			},
			handleSwitch(i) {
				if (i) {
					this.getCommentList(this.data.id)
				} else {
					this.getLikeList()
				}
			}
		},
	}
</script>

<style lang="less">
	.circle-chat-detail-warp {
		background: rgba(245, 245, 245, 1);
		height: 100vh;

		.container {
			padding: 0;
			margin-top: 60rpx;
		}

		.mask {
			background: rgba(51, 51, 51, .6);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 110;
		}

		.occupying {
			height: 166rpx;
		}

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
		}

		.content-warp {
			padding: 10rpx 30rpx;
			margin-bottom: 10rpx;

			.header {
				margin-bottom: 20rpx;

				.iconshoucang-yixuanzhong {
					color: #FF9933;
				}

				.info {
					margin-left: 30rpx;
					line-height: 40rpx;
				}
			}

			.body {
				.img {
					margin-top: 20rpx;
				}
			}
		}

		.comment-wrap {
			.header {
				padding-top: 25rpx;
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid rgba(206, 200, 200, .5);

				.checked {
					position: relative;
					color: #E41805;

					&::after {
						position: absolute;
						top: 59rpx;
						left: 30rpx;
						content: '';
						width: 75%;
						height: 2rpx;
						background: #E41805;
						display: inline-block;
						z-index: 111;
					}
				}

				.commont {
					padding-left: 30rpx;
				}

				.like {
					padding-right: 30rpx;

					&.checked::after {
						left: 0rpx;
					}
				}
			}

			.comment-body {
				padding: 30rpx 30rpx;

				.item {
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					justify-content: flex-start;
					margin-bottom: 60rpx;

					.info {
						width: 78vw;
						margin-left: 25rpx;

						.commentor {
							.name {
								color: #666666;
							}

							.like {
								width: 38rpx;
								line-height: 40rpx;

								.like-icon {
									font-size: 40rpx;

									&.iconyidianzan1 {
										color: #E41805;
									}
								}
							}
						}

						.comment-content {
							.content {
								font-size: 30rpx;
								margin-bottom: 10rpx;
							}

							.comment-date {
								font-size: 24rpx;
							}

							.comment-replay-number {
								margin-left: 40rpx;
								background: rgba(245, 245, 245, 1);
								border-radius: 20rpx;
								font-size: 24rpx;
								color: #333333;
								padding: 0rpx 20rpx;
								height: 40rpx;
								line-height: 40rpx;
							}
						}

						.comment-replay {
							background: rgba(245, 245, 245, 1);
							border-radius: 5rpx;
							padding: 18rpx 22rpx;
							margin-top: 20rpx;
							box-sizing: border-box;

						}
					}
				}
			}

			.thumbsUps-body {
				.item {
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					justify-content: flex-start;
					margin: 5px 15px;
					border-bottom: 1rpx solid #efefef;
					padding: 15px 0;

					&:last-child {
						border-bottom-color: #ffffff;
					}

					.info {
						width: 78vw;
						margin-left: 25rpx;
						line-height: 40rpx;

						.autograph {
							font-size: 24rpx;
						}

						.name {
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
</style>
